<template>
  <div class="order-list">
    <!-- 搜索和操作区域 -->
    <el-card class="action-card">
      <div class="action-header">
        <div class="left">
          <h2 class="page-title">订单管理</h2>
          <el-tag type="info" effect="plain" class="order-count">
            {{ total }} 个订单
          </el-tag>
        </div>
        <div class="right">
          <el-button :icon="Refresh" circle @click="handleRefresh" />
        </div>
      </div>

      <!-- 可折叠的搜索区域 -->
      <el-card class="search-card" shadow="never">
        <template #header>
          <div class="search-header" @click="toggleSearch">
            <div class="title">
              <el-icon><Search /></el-icon>
              <span>筛选条件</span>
            </div>
            <div class="arrow" :class="{ 'is-active': showSearch }">
              <el-icon><ArrowDown /></el-icon>
            </div>
          </div>
        </template>
        <div class="search-content" :class="{ collapsed: !showSearch }" v-show="showSearch">
          <el-form :model="searchForm" ref="searchFormRef" :inline="true" class="search-form">
            <template v-if="isAdmin">
              <el-form-item label="用户ID" prop="userId">
                <el-input v-model="searchForm.userId" placeholder="请输入用户ID" clearable />
              </el-form-item>
              <el-form-item label="服务人员ID" prop="staffId">
                <el-input v-model="searchForm.staffId" placeholder="请输入服务人员ID" clearable />
              </el-form-item>
            </template>
            <el-form-item label="订单状态" prop="status">
              <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 180px">
                <el-option v-for="(label, value) in orderStatusMap" 
                  :key="value" 
                  :label="label" 
                  :value="Number(value)" 
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">
                <el-icon><Search /></el-icon>查询
              </el-button>
              <el-button @click="resetSearch">
                <el-icon><Refresh /></el-icon>重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

      <!-- 表格区域 -->
      <div class="table-container">
        <el-table 
          v-loading="loading" 
          :data="tableData" 
          border 
          @selection-change="handleSelectionChange"
          style="width: 100%"
          row-key="id"
        >
          <el-table-column type="expand">
            <template #default="{ row }">
              <div v-if="row.review" class="expand-review">
                <div class="review-header">
                  <el-icon><StarFilled /></el-icon>
                  <span>评价信息</span>
                </div>
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="服务技能">
                    <div class="rating-item">
                      <el-rate v-model="row.review.skillRating" disabled />
                      <span class="rating-score">{{ row.review.skillRating }}分</span>
                    </div>
                  </el-descriptions-item>
                  <el-descriptions-item label="服务态度">
                    <div class="rating-item">
                      <el-rate v-model="row.review.attitudeRating" disabled />
                      <span class="rating-score">{{ row.review.attitudeRating }}分</span>
                    </div>
                  </el-descriptions-item>
                  <el-descriptions-item label="服务体验">
                    <div class="rating-item">
                      <el-rate v-model="row.review.experienceRating" disabled />
                      <span class="rating-score">{{ row.review.experienceRating }}分</span>
                    </div>
                  </el-descriptions-item>
                  <el-descriptions-item label="综合评分">
                    <div class="rating-item">
                      <el-rate v-model="row.review.overallRating" disabled allow-half />
                      <span class="rating-score">{{ row.review.overallRating }}分</span>
                    </div>
                  </el-descriptions-item>
                  <el-descriptions-item label="评价内容" :span="2">
                    {{ row.review.content || '暂无评价内容' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="评价时间" :span="2">
                    {{ formatDate(row.review.createTime) }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div v-else class="no-review">
                <el-empty description="暂无评价信息" />
              </div>
            </template>
          </el-table-column>
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="id" label="订单号" min-width="120" />
          <el-table-column v-if="isAdmin" label="用户信息" min-width="150">
            <template #default="{ row }">
              {{ row.user?.name }} (ID: {{ row.userId }})
            </template>
          </el-table-column>
          <el-table-column v-if="isAdmin" label="服务人员" min-width="150">
            <template #default="{ row }">
              {{ row.staff?.name }} (ID: {{ row.staffId }})
            </template>
          </el-table-column>
          <el-table-column label="服务项目" min-width="150" show-overflow-tooltip>
            <template #default="{ row }">
              {{ row.serviceItem?.title }}
            </template>
          </el-table-column>
          <el-table-column prop="totalAmount" label="订单金额" min-width="120" align="right">
            <template #default="{ row }">
              <span style="color: #F56C6C; font-weight: 600;">¥{{ row.totalAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderStatus" label="订单状态" min-width="100">
            <template #default="{ row }">
              <el-tag :type="getOrderStatusType(row.orderStatus)" effect="plain">
                {{ orderStatusMap[row.orderStatus] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" min-width="160">
            <template #default="{ row }">
              {{ formatDate(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-button type="primary" link @click="handleDetail(row)">详情</el-button>
              <el-button 
                v-if="canUpdateStatus(row)"
                type="warning" 
                link 
                @click="handleUpdateStatus(row)"
              >变更状态</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 订单详情对话框 -->
    <el-dialog
      title="订单详情"
      v-model="detailVisible"
      width="700px"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单号">{{ currentOrder?.id }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag :type="getOrderStatusType(currentOrder?.orderStatus)">
            {{ orderStatusMap[currentOrder?.orderStatus] }}
          </el-tag>
        </el-descriptions-item>
        <template v-if="isAdmin">
          <el-descriptions-item label="用户信息">
            {{ currentOrder?.user?.name }} (ID: {{ currentOrder?.userId }})
          </el-descriptions-item>
          <el-descriptions-item label="服务人员">
            {{ currentOrder?.staff?.name }} (ID: {{ currentOrder?.staffId }})
          </el-descriptions-item>
        </template>
        <el-descriptions-item label="服务项目">
          {{ currentOrder?.serviceItem?.title }}
        </el-descriptions-item>
        <el-descriptions-item label="订单金额">
          ¥{{ currentOrder?.totalAmount }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ formatDate(currentOrder?.createTime) }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 备注信息单独使用一个 el-descriptions -->
      <el-descriptions :column="1" border style="margin-top: 20px">
        <el-descriptions-item label="备注">
          <div v-if="parseRemark(currentOrder?.remark).length">
            <div v-for="([key, value]) in parseRemark(currentOrder?.remark)" :key="key" class="remark-item">
              <strong>{{ key }}:</strong> {{ value }}
            </div>
          </div>
          <div v-else>暂无信息</div>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 取消原因等信息也单独一个 el-descriptions -->
      <el-descriptions v-if="currentOrder?.orderStatus === 6" :column="1" border style="margin-top: 20px">
        <el-descriptions-item label="取消原因">
          {{ currentOrder?.cancelReason || '无' }}
        </el-descriptions-item>
        <el-descriptions-item label="取消时间">
          {{ formatDate(currentOrder?.cancelTime) }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 评价信息表格 -->
      <div v-if="currentOrder?.review" class="review-section">
        <div class="review-header">
          <el-icon><StarFilled /></el-icon>
          <span>评价信息</span>
        </div>
        <el-card class="review-card" shadow="never">
          <div class="review-ratings">
            <div class="rating-item">
              <span class="rating-label">服务技能</span>
              <div class="rating-content">
                <el-rate v-model="currentOrder.review.skillRating" disabled />
                <span class="rating-score">{{ currentOrder.review.skillRating }}分</span>
              </div>
            </div>
            <div class="rating-item">
              <span class="rating-label">服务态度</span>
              <div class="rating-content">
                <el-rate v-model="currentOrder.review.attitudeRating" disabled />
                <span class="rating-score">{{ currentOrder.review.attitudeRating }}分</span>
              </div>
            </div>
            <div class="rating-item">
              <span class="rating-label">服务体验</span>
              <div class="rating-content">
                <el-rate v-model="currentOrder.review.experienceRating" disabled />
                <span class="rating-score">{{ currentOrder.review.experienceRating }}分</span>
              </div>
            </div>
            <div class="rating-item overall">
              <span class="rating-label">综合评分</span>
              <div class="rating-content">
                <el-rate v-model="currentOrder.review.overallRating" disabled allow-half />
                <span class="rating-score">{{ currentOrder.review.overallRating }}分</span>
              </div>
            </div>
          </div>
          <div class="review-divider"></div>
          <div class="review-comment">
            <div class="comment-label">评价内容：</div>
            <div class="comment-content">{{ currentOrder.review.content || '未填写评价内容' }}</div>
            <div class="review-time">评价时间：{{ formatDate(currentOrder.review.createTime) }}</div>
          </div>
        </el-card>
      </div>
    </el-dialog>

    <!-- 状态更新对话框 -->
    <el-dialog
      v-model="statusDialogVisible"
      title="更新订单状态"
      width="500px"
    >
      <el-form
        ref="statusFormRef"
        :model="statusForm"
        label-width="100px"
      >
        <el-form-item label="新状态">
          <el-select v-model="statusForm.status" placeholder="请选择新状态">
            <el-option
              v-for="option in getAvailableStatus(currentOrder?.orderStatus)"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="statusDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitStatusUpdate">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh, ArrowDown, StarFilled } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'
import request from '@/utils/request'
import dateUtils from '@/utils/dateUtils'

const userStore = useUserStore()
const isAdmin = computed(() => userStore.isAdmin)

// 搜索表单
const searchForm = reactive({
  userId: '',
  staffId: '',
  status: '',
})

// 表格数据
const loading = ref(false)
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const selectedRows = ref([])

// 搜索区域显示控制
const showSearch = ref(true)
const searchFormRef = ref(null)

// 订单状态映射
const orderStatusMap = {
  1: '待支付',
  2: '待接单',
  3: '已接单',
  4: '服务中',
  5: '已完成',
  6: '已取消',
  7: '已关闭'
}

// 状态标签类型映射
const statusTypeMap = {
  1: 'warning',   // 待支付
  2: 'info',      // 待接单
  3: 'primary',   // 已接单
  4: 'primary',   // 服务中
  5: 'success',   // 已完成
  6: 'danger',    // 已取消
  7: 'info'       // 已关闭
}

// 方法定义
const handleSearch = () => {
  currentPage.value = 1
  fetchOrders()
}

const handleRefresh = () => {
  searchForm.userId = ''
  searchForm.staffId = ''
  searchForm.status = ''
  currentPage.value = 1
  fetchOrders()
}

const handleSelectionChange = (rows) => {
  selectedRows.value = rows
}

const handleSizeChange = (val) => {
  pageSize.value = val
  fetchOrders()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchOrders()
}

const toggleSearch = () => {
  showSearch.value = !showSearch.value
}

const resetSearch = () => {
  searchFormRef.value?.resetFields()
  handleSearch()
}

// 格式化日期
const formatDate = (date) => {
  return date ? dateUtils.format(date, 'YYYY-MM-DD HH:mm:ss') : ''
}

// 获取订单状态类型
const getOrderStatusType = (status) => {
  return statusTypeMap[status] || 'info'
}

// 获取订单列表
const fetchOrders = async () => {
  loading.value = true
  try {
    const params = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      ...searchForm
    }

    // 如果是保姆，强制添加staffId参数
    if (userStore.isStaff) {
      params.staffId = userStore.staffInfo?.id
    }

    await request.get('/order/list', params, {
      onSuccess: (res) => {
        // 处理每个订单的评价信息
        tableData.value = (res.records || []).map(order => {
          if (order.review) {
            order.review = {
              skillRating: order.review.skillRating || 0,
              attitudeRating: order.review.attitudeRating || 0,
              experienceRating: order.review.experienceRating || 0,
              overallRating: order.review.overallRating || 0,
              content: order.review.content || '',
              createTime: order.review.createTime
            }
          }
          return order
        })
        total.value = res.total || 0
      }
    })
  } catch (error) {
    console.error('获取订单列表失败:', error)
    ElMessage.error('获取订单列表失败')
  } finally {
    loading.value = false
  }
}

// 解析备注信息
const parseRemark = (remark) => {
  try {
    const parsed = JSON.parse(remark);
    return Object.entries(parsed); // 转换为键值对数组
  } catch (error) {
    console.error('解析备注失败:', error);
    return [];
  }
}

// 详情对话框
const detailVisible = ref(false)
const currentOrder = ref(null)

// 状态更新对话框
const statusDialogVisible = ref(false)
const statusFormRef = ref(null)
const statusForm = ref({
  status: null,
  reason: ''
})

// 判断是否可以更新状态
const canUpdateStatus = (row) => {
  // 已完成和已取消的订单不能被操作
  if (row.orderStatus === 5 || row.orderStatus === 6) return false
  
  // 如果是管理员，可以操作其他状态的订单
  if (userStore.isAdmin) return true
  
  // 如果不是保姆，不显示操作按钮
  if (!userStore.isStaff) return false
  
  // 确保只能操作自己的订单
  if (row.staffId !== userStore.staffInfo?.id) return false
  
  // 根据订单状态判断是否可以操作
  switch (row.orderStatus) {
    case 2: // 待接单
      return true // 可以接单
    case 3: // 已接单
      return true // 可以开始服务
    case 4: // 服务中
      return true // 可以完成服务
    default:
      return false
  }
}

// 获取可用的状态选项
const getAvailableStatus = (currentStatus) => {
  // 已完成和已取消的订单不能被操作
  if (currentStatus === 5 || currentStatus === 6) return []
  
  // 如果是管理员，可以操作其他状态
  if (userStore.isAdmin) {
    switch (currentStatus) {
      case 1: // 待支付
        return [
          { value: 2, label: '待接单' },
          { value: 6, label: '已取消' }
        ]
      case 2: // 待接单
        return [
          { value: 3, label: '已接单' },
          { value: 6, label: '已取消' }
        ]
      case 3: // 已接单
        return [
          { value: 4, label: '服务中' },
          { value: 6, label: '已取消' }
        ]
      case 4: // 服务中
        return [
          { value: 5, label: '已完成' },
          { value: 6, label: '已取消' }
        ]
      default:
        return []
    }
  }
  
  // 保姆只能按正常流程操作
  switch (currentStatus) {
    case 2: // 待接单
      return [{ value: 3, label: '已接单' }]
    case 3: // 已接单
      return [{ value: 4, label: '服务中' }]
    case 4: // 服务中
      return [{ value: 5, label: '已完成' }]
    default:
      return []
  }
}

// 处理状态更新
const handleUpdateStatus = (row) => {
  currentOrder.value = row
  const availableStatus = getAvailableStatus(row.orderStatus)
  if (availableStatus.length > 0) {
    statusForm.value.status = availableStatus[0].value
    statusForm.value.reason = ''
    statusDialogVisible.value = true
  } else {
    ElMessage.warning('当前状态无法更新')
  }
}

// 提交状态更新
const submitStatusUpdate = async () => {
  if (!statusFormRef.value) return
  
  try {
    await statusFormRef.value.validate()
    
    // 更新订单状态
    await request.put(`/order/${currentOrder.value.id}/status?status=${statusForm.value.status}`, {
      successMsg: '状态更新成功'
    })
    
    statusDialogVisible.value = false
    fetchOrders()
  } catch (error) {
    console.error('更新状态失败:', error)
  }
}

// 查看详情
const handleDetail = async (row) => {
  try {
    await request.get(`/order/${row.id}`, null, {
      showDefaultMsg: false,
      onSuccess: (res) => {
        // 确保评价信息存在且格式正确
        if (res.review) {
          res.review = {
            skillRating: res.review.skillRating || 0,
            attitudeRating: res.review.attitudeRating || 0,
            experienceRating: res.review.experienceRating || 0,
            overallRating: res.review.overallRating || 0,
            content: res.review.content || '',
            createTime: res.review.createTime
          }
        }
        currentOrder.value = res
        detailVisible.value = true
      }
    })
  } catch (error) {
    console.error('获取订单详情失败:', error)
    ElMessage.error('获取订单详情失败')
  }
}

// 初始化
onMounted(() => {
  fetchOrders() // 加载订单列表
})
</script>

<style lang="scss" scoped>
.order-list {
  padding: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .action-card {
    background: #fff;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    flex: 1;

    :deep(.el-card__body) {
      padding: 20px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }

    .action-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .left {
        display: flex;
        align-items: center;
        gap: 12px;

        .page-title {
          margin: 0;
          font-size: 20px;
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
      }

      .right {
        display: flex;
        align-items: center;
        gap: 12px;
      }
    }
  }

  .search-card {
    margin-bottom: 16px;
    border: none;
    background-color: #f8fafc;

    .search-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      user-select: none;

      .title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #475569;
        font-weight: 500;
      }

      .arrow {
        transition: transform 0.3s;

        &.is-active {
          transform: rotate(180deg);
        }
      }
    }

    .search-content {
      transition: all 0.3s;
      
      &.collapsed {
        margin-top: -200px;
        opacity: 0;
      }
    }

    .search-form {
      padding: 16px 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }
  }

  .table-container {
    width: 100%;
    overflow-x: auto;
    
    :deep(.el-table) {
      width: 100% !important;

      .el-table__header,
      .el-table__body {
        width: 100% !important;
        table-layout: fixed !important;
      }

      .el-table__cell {
        white-space: nowrap;
      }

      .el-table__fixed {
        height: 100% !important;
      }

      .el-table__body-wrapper {
        overflow-x: auto !important;
      }
    }
  }

  .pagination {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
  }

  .review-section {
    margin-top: 24px;

    .review-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 500;
      color: #475569;

      .el-icon {
        color: #f59e0b;
      }
    }

    .review-card {
      background-color: #f8fafc;
      border: 1px solid #e2e8f0;

      .review-ratings {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        padding: 16px;

        .rating-item {
          display: flex;
          flex-direction: column;
          gap: 8px;

          &.overall {
            grid-column: 1 / -1;
            border-top: 1px dashed #e2e8f0;
            padding-top: 16px;
            margin-top: 8px;

            .rating-label {
              color: #1e293b;
              font-weight: 500;
            }

            .rating-score {
              color: #f59e0b;
              font-size: 16px;
              font-weight: 600;
            }
          }

          .rating-label {
            color: #64748b;
            font-size: 14px;
          }

          .rating-content {
            display: flex;
            align-items: center;
            gap: 8px;

            :deep(.el-rate) {
              .el-rate__icon {
                font-size: 18px;
              }
            }

            .rating-score {
              color: #f59e0b;
              font-weight: 500;
            }
          }
        }
      }

      .review-divider {
        height: 1px;
        background-color: #e2e8f0;
        margin: 0 16px;
      }

      .review-comment {
        padding: 16px;

        .comment-label {
          color: #64748b;
          font-size: 14px;
          margin-bottom: 8px;
        }

        .comment-content {
          color: #1e293b;
          line-height: 1.6;
          margin-bottom: 12px;
          padding: 12px;
          background-color: #fff;
          border-radius: 4px;
          border: 1px solid #e2e8f0;
        }

        .review-time {
          color: #94a3b8;
          font-size: 13px;
          text-align: right;
        }
      }
    }
  }
}
</style> 